<template>
    <jb-crud-page
        ref="pageRef"
        title-icon="carbon:batch-job"
        title-text="Demo演示"
        search-url="/api/admin/demoTable/datas"
        :search-conditions="pageConditions"
        :edit-component="DemoEdit">
        <template #conditions-form>
            <jb-input
                v-model:value="pageConditions.keywords"
                placeholder="输入关键字搜索"
                @keyup.enter="pageRef?.loadData(true)"
            />
            <jb-select
                v-model:value="pageConditions.sex"
                url="/api/admin/dictionary/options?typeKey=sex"
                placeholder="=性别="
                class="w-130px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.enable"
                url="/api/admin/dictionary/options?typeKey=options_enable"
                placeholder="=状态="
                filterable
                class="w-100px"
            ></jb-select>
            <jb-select
                v-model:value="pageConditions.type"
                url="/api/admin/dictionary/options?typeKey=dept_type"
                placeholder="=类型="
                :clearable="false"
                class="w-130px"
                filterable
            ></jb-select>
            <n-date-picker
                v-model:formatted-value="pageConditions.startTime"
                placeholder="=开始时间="
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                clearable
                class="w-190px"
            />
        </template>
        <template #opt>
            <n-button-group>
                <jb-btn
                    ghost
                    type="primary"
                    :icon="Icons.ADD"
                    @click="pageRef?.showEditModal('新增Demo数据')"
                >
                    新增
                </jb-btn>
                <jb-btn
                    ghost
                    type="success"
                    icon="ic:baseline-cloud-upload"
                    :modal-title="'使用Excel上传并导入数据'"
                    :modal-component="DemoUpload"
                    :modal-args="{
                        positiveText: '',
                        negativeText: '关闭'
                    }"
                >
                    导入
                </jb-btn>
                <jb-export
                    server-url="/api/admin/demoTable/export"
                    :server-form="pageConditions"
                    :table-instance="tableRef"
                >
                </jb-export>
            </n-button-group>
        </template>
        <template #default="{ list, tableStartIndex }">
            <jb-table
                ref="tableRef"
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{ height: 100 }">
                <jb-column type="checkbox" width="60" fixed="left"></jb-column>
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="name"
                    title="姓名"
                    min-width="140"
                    fixed="left"
                ></jb-column>
                <jb-column field="userName" title="用户名" min-width="140"></jb-column>
                <jb-column field="avatar" title="头像" width="100">
                    <template #default="{ row }">
                        <jb-avatar :src="row.avatar"></jb-avatar>
                    </template>
                </jb-column>
                <jb-column field="phone" title="手机号" min-width="140"></jb-column>
                <jb-column field="email" title="E-mail" min-width="160">
                    <template #default="{ row }">
                        <span>{{ row?.email ? row?.email : '未设置' }}</span>
                    </template>
                </jb-column>
                <jb-column field="age" title="年龄" width="100" sortable></jb-column>
                <jb-column field="roles" title="角色" min-width="140">
                    <template #default="{ row }">
                        <n-scrollbar v-if="row.roles" style="max-height: 100px">
                            <jb-tag-group :tags="row.roleNames"></jb-tag-group>
                        </n-scrollbar>
                        <span v-else>未设置</span>
                    </template>
                </jb-column>
                <jb-column field="hobbys" title="爱好" min-width="140">
                    <template #default="{ row }">
                        <jb-tag-group :tags="row.hobbys"></jb-tag-group>
                    </template>
                </jb-column>

                <jb-column field="briefInfo" title="简介" min-width="160"></jb-column>
                <jb-column field="content" title="详情" width="120">
                    <template #default="{ row }">
                        <jb-btn
                            :icon="Icons.EYE"
                            type="primary"
                            secondary
                            tip-text="点击查看"
                            drawer-title="详情描述"
                            :drawer-html="row.content"
                            drawer-positive-text=""
                            circle
                        ></jb-btn>
                    </template>
                </jb-column>
                <jb-column title="是否启用" width="80" fixed="right">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/post/toggleEnable/${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column field="createTime" title="日期" min-width="180"  formatter="date"></jb-column>
                <jb-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            type="warning"
                            secondary
                            circle
                            @click="
                                pageRef?.showEditModal('编辑Demo数据', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            class="mx-8px"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/demoTable/delete/${row.id}`"
                            @success="pageRef?.loadData()"
                        ></jb-btn>
                        <!--                        <jb-btn-->
                        <!--                            tip-text="编辑"-->
                        <!--                            :icon="Icons.EDIT"-->
                        <!--                            type="warning"-->
                        <!--                            secondary-->
                        <!--                            circle-->
                        <!--                            :modal-component="DemoEdit"-->
                        <!--                            :modalYesClick="handleTestYes"-->
                        <!--                        ></jb-btn>-->
                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import JbTagGroup from '@/components/_builtin/jb-tag-group/index.vue'
import DemoEdit from './components/edit/index.vue'
import DemoUpload from './components/upload/index.vue'
import type { VxeTableInstance } from 'vxe-table'

const pageRef = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    sex: '',
    type: '',
    enable: '',
    startTime: null
})

const tableRef = ref<VxeTableInstance>()
</script>

<style scoped></style>
